<template>
<div class="container__">
    <div class="zhe" v-if="levshow"></div>
    <van-cell is-link title="头像" @click="uplodavtor">
        <view v-if="myinfo&&myinfo.avatar"><img class="avtor" :src="myinfo.avatar" alt=""></view>
            <view v-else><img class="avtor" :src="img+'/tx.png'" alt=""></view>
    </van-cell>
    <van-cell is-link title="名字" link-type="navigateTo" url="/pages/editname/main?name=2">
        <view v-if="myinfo&&myinfo.nickname">{{myinfo.nickname}}</view>
        <view v-else>去设置</view>
    </van-cell>

    <van-cell is-link title="性别" @click="sexd">
        <div v-if="myinfo">
            <span v-if="myinfo.gender==1">男</span>
            <span v-if="myinfo.gender==2">女</span>
        </div>
        <div v-else>请选择</div>
    </van-cell>
    <van-cell title="年龄" link-type="navigateTo" url="/pages/editname/main?name=3" is-link>
        <view v-if="myinfo&&myinfo.age">{{myinfo.age}}</view>
        <view v-else>去设置</view>
    </van-cell>
    <van-cell is-link title="年级" @click="levd" v-if="myinfo.class">
        <view v-if="myinfo&&myinfo.class=='0'">请选择</view>
        <view v-else>{{myinfo.class}}</view>
    </van-cell>
    <van-cell title="我的位置" @click="chooseadress" is-link>
        <view class="adess_">
            <img :src="img+'/20000.png'" alt="">
            <span v-if="myinfo&&myinfo.area">{{myinfo.area}}</span>
            <span v-else>前往定位</span>
        </view>
    </van-cell>
    <van-cell is-link title="个人简介" link-type="navigateTo" url="/pages/editname/main?name=6">
        <view v-if="myinfo&&myinfo.brief">已编辑</view>
        <view v-else>去设置</view>
    </van-cell>
    <!-- <van-cell is-link title="兴趣爱号" link-type="navigateTo" url="/pages/editname/main?name=11">
        <view>已选择</view>
    </van-cell> -->
    <!-- 性别 -->
    <van-action-sheet @cancel="cancel" :show="sex" cancel-text="取消" :actions="sexlist" @select="onSelect" />
    <!-- 年级 -->
    <van-picker v-if="levshow" show-toolbar title="请选择年级" :columns="lev" @cancel="onCancel" @confirm="onConfirm" />

    <van-toast id="van-toast" />
</div>
</template>

<script>
import Toast from '../../../static/dist/toast/toast';
import {
    myinfo
} from '@/api/my'
import {
    setgender
} from '@/api/my'
import {
    setclass
} from '@/api/my'
import {
    setarea
} from '@/api/my'
import {
    setavatar
} from '@/api/my'

import URL from '@/utils/host'
export default {
    data() {
        return {
            sex: false,
            levshow: false,
            sexlist: [{
                    name: '男',
                    className: 'nan',
                    id: 1,
                },
                {
                    name: '女',
                    className: 'nv',
                    id: 2
                }
            ],
            lev: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '七年级', '八年级', '九年级', '十年级', '十一年级', '十二年级'],
            infolist: {
                lev: '',
                sex: '',
                name: '',
                adress: '',
                age: '',
                avtor: '',
                jiejian: '',
                aihao: '',
            },
            myinfo: null,
            editform: {
                type: '',
                grade: '',
                address: '',
                gender: '',
                sex: '',
                avatar: '',
            },
            img: this.$URL.imgurl,
        }
    },
    methods: {
        getmyinfo() {
            myinfo().then(res => {
                this.myinfo = res.data
            })
        },
        sexd() {
            this.sex = true
            this.editform.type = 10
        },
        levd() {
            this.levshow = true
            this.editform.type = 4
        },
        cancel() {
            this.sex = false
        },
        onSelect(item) {
            this.sex = false
            setgender({
                gender: item.mp.detail.id
            }).then(res => {
                this.getmyinfo()
            })
        },

        onCancel() {
            this.levshow = false
        },
        onConfirm(e) {
            this.levshow = false
            setclass({
                class: e.mp.detail.value
            }).then(res => {
                this.getmyinfo()
            })

        },

        uplodavtor() {
            wx.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'],
                sourceType: ['album', 'camera'],
                success: (res) => {
                    // tempFilePath可以作为img标签的src属性显示图片
                    wx.uploadFile({
                        url: URL.host2 + 'user/avatar',
                        filePath: res.tempFilePaths[0],
                        name: 'avatar',
                        header: {
                            'Authorization': wx.getStorageSync('token'),
                            "Content-Type": "multipart/form-data"
                        },
                        success: (res) => {
                            this.getmyinfo()
                        }
                    })
                }
            })
        },
        chooseadress() {
            console.log(1)
            wx.chooseLocation({
                success:(res) => {
                    setarea({ area: res.name}).then(res => {
                        this.getmyinfo()
                    })
                },
                fail: (err) => {

                }
            });
        }
    },
    onShow() {
        Object.assign(this.$data, this.$options.data())
        this.getmyinfo()
    },
    mounted() {
        // this.getmyinfo()
    },
}
</script>

<style lang="scss">
.container__ {
    background-color: #F4F5F5;
    min-height: 100vh;
    font-size: 16px;
    // padding: 40px 15px;
    box-sizing: border-box;

    .adess_ {
        height: 100%;
        align-items: center;

        img {
            height: 19px;
            width: 13px;
            vertical-align: text-bottom;
            margin-right: 9px;
        }

    }

    .avtor {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .location {
        font-size: 18px;
        // height: 24px;
        line-height: 24px;
        // vertical-align: baseline;
    }

    .van-icon-location-o {
        line-height: 24px;
        color: #1A84FB;
    }

    .van-cell {
        align-items: center;
        height: 52px;
        box-sizing: border-box;
    }

    .van-picker {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 3;
    }

    .zhe {
        min-height: 100vh;
        min-width: 100%;
        background: rgba(0, 0, 0, 1);
        opacity: 0.5;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
    }
}
</style>
